<div class="pannel-default">
    <nz-tabset [nzTabBarExtraContent]="extraTemplate">
        <nz-tab [nzTitle]="'系统用户列表'">
            <nz-table #nzTable [nzData]="userList" [nzLoading]="tableLoading">
                <thead>
                    <tr>
                        <th>用户名</th>
                        <th>联系人</th>
                        <th>联系人电话</th>
                        <th>创建时间</th>
                        <th>状态</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    <tr *ngFor="let data of nzTable.data">
                        <td>{{ data.loginId }}</td>
                        <td>{{ data.contactName }}</td>
                        <td>{{ data.contactTel }}</td>
                        <td>{{ data.createTime }}</td>
                        <td><nz-tag *ngIf="data.status === 'Y'" [nzColor]="'#87d068'">启用</nz-tag><nz-tag *ngIf="data.status !== 'Y'" [nzColor]="'#f50'">禁用</nz-tag></td>
                        <td><a (click)="updateUser(data)" style="margin-right: 8px;">修改</a><a>删除</a></td>
                    </tr>
                </tbody>
            </nz-table>
        </nz-tab>
    </nz-tabset>
    <ng-template #extraTemplate>
        <button nz-button nzType="primary" (click)="addUser()">新增管理员</button>
    </ng-template>
    <nz-modal [(nzVisible)]="isVisible" nzTitle="{{modalTitle}}" [nzOkLoading]="isOkLoading" (nzOnCancel)="handleCancel()" (nzOnOk)="handleOk()">
        <form nz-form [formGroup]="validateForm">
            <nz-form-item>
                <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="contactName">联系人</nz-form-label>
                <nz-form-control [nzSm]="14" [nzXs]="24" [(nzValidateStatus)]="validateForm.controls.contactName">
                    <input nz-input id="contactName" formControlName="contactName" placeholder="请输入联系人" />
                    <nz-form-explain *ngIf="validateForm.get('contactName')?.dirty && validateForm.get('contactName')?.errors">联系人不能为空！</nz-form-explain>
                </nz-form-control>
            </nz-form-item>
            <nz-form-item>
                <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="contactTel" nzRequired>联系人手机号</nz-form-label>
                <nz-form-control [nzSm]="14" [nzXs]="24" [nzValidateStatus]="validateForm.get('contactTel')">
                    <input nz-input id="contactTel" formControlName="contactTel" placeholder="请输入联系人手机号" />
                    <nz-form-explain *ngIf="validateForm.get('contactTel')?.dirty && validateForm.get('contactTel')?.errors">请输入正确的手机号码！</nz-form-explain>
                </nz-form-control>
            </nz-form-item>
            <nz-form-item>
                <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="contactEmail" nzRequired>联系人邮箱</nz-form-label>
                <nz-form-control [nzSm]="14" [nzXs]="24" [nzValidateStatus]="validateForm.get('contactEmail')">
                    <input nz-input id="contactEmail" formControlName="contactEmail" placeholder="请输入邮箱地址" />
                    <nz-form-explain *ngIf="validateForm.get('contactEmail')?.dirty && validateForm.get('contactEmail')?.errors">请输入正确的邮箱地址！</nz-form-explain>
                </nz-form-control>
            </nz-form-item>
            <nz-form-item>
                <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="name" nzRequired>用户名</nz-form-label>
                <nz-form-control [nzSm]="14" [nzXs]="24" [nzValidateStatus]="validateForm.get('name')">
                    <input nz-input id="name" formControlName="name" placeholder="请输入用户名" />
                    <nz-form-explain *ngIf="validateForm.get('name')?.dirty && validateForm.get('name')?.errors">请输入用户名！</nz-form-explain>
                </nz-form-control>
            </nz-form-item>
            <nz-form-item>
                <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="loginId" nzRequired>登录账号</nz-form-label>
                <nz-form-control [nzSm]="14" [nzXs]="24" [nzValidateStatus]="validateForm.get('loginId')">
                    <input nz-input id="loginId" formControlName="loginId" placeholder="请输入路由地址" />
                    <nz-form-explain *ngIf="validateForm.get('loginId')?.dirty && validateForm.get('loginId')?.errors">请输入正确的手机号码！</nz-form-explain>
                </nz-form-control>
            </nz-form-item>
            <nz-form-item *ngIf="!this.activeData.id">
                <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="loginPw" nzRequired>登录密码</nz-form-label>
                <nz-form-control [nzSm]="14" [nzXs]="24" [nzValidateStatus]="validateForm.get('loginPw')">
                    <nz-input-group [nzSuffix]="suffixTemplate">
                        <input [type]="passwordVisible ? 'text' : 'password'" minlength="8" nz-input id="loginPw" formControlName="loginPw" placeholder="请输入登录密码" />
                    </nz-input-group>
                          <ng-template #suffixTemplate>
                            <i style="cursor: pointer" nz-icon [nzType]="passwordVisible ? 'eye-invisible' : 'eye'" (click)="passwordVisible = !passwordVisible"></i>
                          </ng-template>
                    <nz-form-explain *ngIf="validateForm.get('loginPw')?.dirty && validateForm.get('loginPw')?.errors">密码至少8位！</nz-form-explain>
                </nz-form-control>
            </nz-form-item>
            <nz-form-item>
                <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="roleId" nzRequired>账号角色</nz-form-label>
                <nz-form-control [nzSm]="14" [nzXs]="24" [nzValidateStatus]="validateForm.get('roleId')">
                    <nz-select style="width: 120px;" formControlName="roleId" nzPlaceHolder="请选择角色">
                        <nz-option *ngFor="let r of roleList" [nzValue]="r.id" [nzLabel]="r.name"></nz-option>
                    </nz-select>
                    <nz-form-explain *ngIf="validateForm.get('roleId')?.dirty && validateForm.get('roleId')?.errors">请选择角色！</nz-form-explain>
                </nz-form-control>
            </nz-form-item>
            <nz-form-item>
                <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="status" nzRequired>状态</nz-form-label>
                <nz-form-control [nzSm]="14" [nzXs]="24" [nzValidateStatus]="validateForm.get('status')">
                        <nz-select style="width: 120px;"  formControlName="status">
                            <nz-option nzValue="Y" nzLabel="正常"></nz-option>
                            <nz-option nzValue="N" nzLabel="禁用"></nz-option>
                        </nz-select>
                </nz-form-control>
            </nz-form-item>
        </form>
    </nz-modal>
</div>
